<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../js/echarts.min.js" charset="utf-8"></script>
</head>
<style>
    .div-1 {
        width: 100%;
        height: 360px;
    }

    .div-1-1 {
        width: 50%;
        height: 100%;
        float: left;
    }

    .div-1-2 {
        width: 50%;
        height: 100%;
        float: left;
    }
</style>

<body>
<div class="div-1">
    <div class="div-1-1" id="pie">

    </div>
</div>
<script>
    var chartDom = document.getElementById('pie');
    var myChart = echarts.init(chartDom);
    var option;

    $.ajax({
        url: "/resume/createdate",
        type: "post",
        data: {},
        success: function (result) {
            var arr = result.data.data;
            var a=arr.length;
            arr[0].value
            arr[0].time
            console.log(a);
            let oneDay = 24 * 3600 * 1000;
            let data = [];
            for (let i = 1; i < arr.length; i++) {
                let now = new Date(arr[i].time.replace(/-/g,"/"));
                data.push([+now, arr[i].value]);
            }
            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[100], '20%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '用户创建时间统计表'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 20
                    },
                    {
                        start: 0,
                        end: 20
                    }
                ],
                series: [
                    {
                        name: 'Fake Data',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        areaStyle: {},
                        data: data
                    }
                ]
            };

            myChart.setOption(option);
        }
    })
</script>
</body>

</html>